<template>
  <div>
    <span>TEST VIDEO</span>
    <video class="demo-video" ref="player" muted autoplay></video>
  </div>
</template>
<script>
  import flvjs from "flv.js";
  export default {
    data () {
      return {
        id: "1",
        rtsp: "rtsp://192.168.0.241:554/0/0/1",
        player: null
      }
    },
    mounted () {
      if (flvjs.isSupported()) {
        let video = this.$refs.player;
        if (video) {
          this.player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
          });
          this.player.attachMediaElement(video);
          try {
            this.player.load();
            this.player.play();
          } catch (error) {
            console.log(error);
          };
        }
      }
    },
    beforeDestroy () {
      this.player.destory();
    }
  }
</script>
<style>
  .demo-video {
    max-width: 880px;
    max-height: 660px;
    /*background-color: pink;*/
  }
</style>
